<template>
	<view class="map">
		<map class="map" id="container" :longitude='122.45704' :latitude='30.71457' :markers='markers' :scale='12'>

			<view class="search">
				<u-search placeholder="请输入航班次" v-model="keyword" :clearabled="true" :showAction="false"
					style="width: 90%;" bgColor='#FFFFFF' height='58rpx'></u-search>
			</view>


			<view class="content">
				<view class="header">
					<view class="top">
						<span>泗礁</span>
						<span id="img"></span>
						<span>沈家湾、南浦</span>
					</view>
					<view class="tips">
						请您耐心等待，船舶正在行驶中
					</view>
				</view>
				<view class="shipInfo">
					<span class="column">
						<span>19061次</span>
						<span class="small">航班次</span>
					</span>
					<span class="line"></span>
					<span class="column">
						<span>13:00</span>
						<span class="small">开船时间</span>
					</span>
					<span class="line"></span>
					<span class="column">
						<span>14:15</span>
						<span class="small">预计到达</span>
					</span>
					<span class="line"></span>
					<span class="column">
						<span>高速客船</span>
						<span class="small">船型</span>
					</span>
				</view>
				<view class="tip">
					<span style="color: orange;">提示：</span>
					<span style="color: #c5c5c5;">泗礁往返沈家湾航程：高速客船约1小时；常规客船约1小时
						30分钟；豪华游轮约1小时30分钟；车客渡约1小时50分钟</span>
				</view>
			</view>
		</map>


	</view>
</template>

<script>
	export default {
		data() {
			return {

				markers: [{
					id: 1,
					longitude: '122.45704',
					latitude: '30.71457',
					iconPath: "https://i.ringzle.com/file/20231120/a0774539324143edaa206acdbe32023f.png",
					width: 30,
					height: 34
				}, {
					id: 2,
					longitude: '122.52216',
					latitude: '30.71581',
					iconPath: "https://i.ringzle.com/file/20231120/d9fb3a7dacf84da4a281c328c1d92775.png",
					width: 30,
					height: 34
				}],
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.map {
		height: 100vh;
		width: 750rpx;
		position: relative;

		.search {
			position: fixed;
			top: 50rpx;
			width: 700rpx;
			margin-left: 25rpx;
		}

		.content {
			padding: 30rpx;
			position: absolute;
			bottom: 0;
			background: #fff;
			height: 436rpx;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			.shipInfo {
				font-size: 26rpx;
				font-weight: 700;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				height: 52rpx;
				// padding: 80rpx;
				margin: 52rpx 28rpx;
				align-items: center;

				.line {
					border-left: #c5c5c5 1rpx solid;
					height: 100%;
				}

				.small {
					font-weight: 400;
					font-size: 24rpx;
					margin-top: 10rpx;
				}

				.column {
					display: flex;
					flex-direction: column;
					align-items: center;

				}
			}

			.tip {
				margin: 70rpx 0 30rpx;
				height: 100%;
				border-top: #f5f3f3 1rpx solid;
			}

			.header {
				border-bottom: 1rpx solid #f5f3f3;
				display: flex;
				flex-direction: column;

				.top {
					font-size: 36rpx;
					font-weight: 600;
					display: flex;
					flex-direction: row;
					align-items: center;

					#img {
						background-size: cover;
						margin: 0 10rpx;
						background: url'@/static/service/cjt.png' no-repeat center;
						width: 51rpx;
						height: 29rpx;
					}
				}

				&>view {}

				.tips {
					color: #a2a2a2;
					margin: 20rpx 0 30rpx;
				}
			}
		}
	}
</style>